import React from 'react';
import { messages } from 'share/common';
import { Popover, Tag } from 'antd';

import WayPointMap from '../../mileage-subsidy-expense/components/way-point-map';
import Condition from 'components/condition';

const { If } = Condition;


const renderCostCenterRender = (record) => {
  const { costCenterItems = [], apportionmentLabels } = record;
  return (
    <section>
      {apportionmentLabels && apportionmentLabels.length > 0 && apportionmentLabels.map((item, i) => {
        let color = 'blue';
        if (item.level === 'ERROR') color = 'red';
        return <Tag key={i} color={color}>{item.name}</Tag>;
      })}
      {costCenterItems &&costCenterItems.map(item => {
        return (
          <div>
            {item.fieldName}: {item.costCenterItemName}
          </div>
        );
      })}
    </section>
  );
};


//渲染出发／到达信息
const renderMileageAllowanceExpenseOrder = (value, date) => (
  <div>
    <Popover content={value.place}>
      {new Date(date).format('yyyy-MM-dd hh:mm:ss')}<br/>
      {value.place}
    </Popover>
  </div>
);


export default {
  handleLabels: (expense) => { // info的标签要聚合在一起
    let labels = {},
      { invoiceLabels = [] } = expense,
      labelsNameMap = {
        'INFO': messages('expense-1.key695')/*其他*/,
        'ERROR': messages('expense-1.key696')/*强管控*/,
        'WARN': messages('expense-1.key697')/*预警*/
      };
    invoiceLabels.forEach(item => {
      if (!labels[item.level]) {
        labels[item.level] = {};
        labels[item.level].length = 1;
        labels[item.level].name = labelsNameMap[item.level];
        labels[item.level].content = [item];
      } else {
        labels[item.level].content.push(item);
        labels[item.level].length++;
      }
    });
    if (labels['INFO']) {
      labels['INFO'].content = [{
        name: labels['INFO'].content.map(item => item.name)
          .join('/')
      }];
    }
    return {
      header: Object.keys(labels)
        .map(item => {
          return <span className="expense-warn-header">{labels[item].name} <span
            className={item.toLocaleLowerCase()}>{labels[item].length}</span></span>;
        }),
      content: Object.keys(labels)
        .map(item => {
          return <div className={`expense-warn-labels ${item.toLocaleLowerCase()}`}>
            {labels[item].content.map(content => <div className="expense-warn-cell">
              {content.name}<If value={content.toast}>: {(content.toast || '').split('&#13;')
              .map(item => <div className="expense-warn-cell-content">{item}</div>)}</If>
            </div>)}
          </div>;
        }),
    };
  },

  columns: new Map([['apportion', // 分摊， 里程信息， 摊销
    [
      {
        title: messages('common.sequence')/*序号*/,
        dataIndex: 'index',
        width: 80,
        render: (text, record, index) => <span>{index + 1}</span>
      },
      {
        title: messages('expense-1.key1')/*分摊项*/,
        dataIndex: 'costCenterRender',
        width: 300,
        render: (text, record) => <Popover placement="topLeft"
                                           content={renderCostCenterRender(record)}>{renderCostCenterRender(record)}</Popover>
      },
      {
        title: messages('expense-1.key198')/*分摊金额*/,
        dataIndex: 'amount',
        width: 100,
        render: (value) => value
      },
      {
        title: messages('expense-1.key199')/*分摊比例*/,
        dataIndex: 'proportion',
        width: 100,
        render: (value) => `${(value * 100).toFixed(2)}%`
      },
      {
        title: messages('expense-1.key200')/*相关人*/,
        dataIndex: 'personName',
        width: 150,
        render: (text) => text
      },
      {
        title: messages('common.operation')/*操作*/,
        dataIndex: 'operate',
        width: 100,
        render: (value) => value
      }
    ]],
    ['mileage',
      [
        {
          title: messages('expense-1.key132')/*出发信息*/,
          dataIndex: 'start',
          width: 200,
          render: (value, record) => renderMileageAllowanceExpenseOrder(value, record.departTime)
        },
        {
          title: messages('expense-1.key133')/*到达信息*/,
          dataIndex: 'end',
          width: 200,
          render: (value, record) => renderMileageAllowanceExpenseOrder(value, record.arriveTime)
        },
        {
          title: messages('expense-1.key134')/*里程*/,
          dataIndex: 'mileage',
          width: 100,
          render: (value, record) => (
            <div>
              <div>{value.toFixed(2)}</div>
              {!!record.travelMileage &&
              <div>{messages('expense-1.key135')/*行驶*/}:{(record.travelMileage).toFixed(2)}</div>}
              <div>{messages('common.reference')/*参考*/}:{record.referenceMileage && record.referenceMileage.toFixed(2)}</div>
            </div>
          )
        },
        {
          title: `${messages('expense-1.key136')/*创建方式*/}`,
          dataIndex: 'createdMode',
          width: 100,
          render: value => {
            if (value === 1001) {
              return messages('expense-1.key139')/*手工创建*/;
            }
            if (value === 1002) {
              return messages('expense-1.key140')/*定位创建*/;
            }
            return '-';
          }
        },
        {
          title: messages('common.matter')/*事由说明temp*/,
          dataIndex: 'remark',
          width: 200,
          render: value => <Popover content={value}> {value} </Popover> || '-'
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'operation',
          width: 30,
          render: (text, record) => <WayPointMap record={record}/>
        }
      ]],
    ['amortise',
      [{
        title: messages('common.sequence')/*序号*/,
        dataIndex: 'index',
        width: 64,
        render: (value, record, index) => <span>{index + 1}</span>
      }, {
        title: messages('expense-1.key55')/*摊销期间*/,
        dataIndex: 'periodName',
        render: (value) => value
      }, {
        title: messages('expense-1.key57')/*摊销金额*/,
        dataIndex: 'amount',
        render: value => value
      }, {
        title: messages('expense-1.key58')/*摊销比例*/,
        dataIndex: 'proportion',
        render: (value) => `${(value * 100).toFixed(2)}%`
      }]]
  ])
};
